<template>
<view class="index-slist">
	<!-- f1  左边图片 -->
	<img src="../../static/img/lvyouxiangqing.png" alt="">
	<!-- f2  右边文字部分 -->
	<view class="article">
		<!-- 上半部分 -->
		<view class="text">
			<text class="title">济州岛 | 去不会腻的神仙地方</text>
			<text class="a1">济州岛去不会腻的神仙地方济州岛去不会腻的神仙地方</text>
		</view>
		<!-- 下半部分头像姓名 -->
		<view class="msg">
			<img src="../../static/img/my-bg.png" alt="">
			<text class="msg-name">春游</text>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		name:"sList",
		data() {
			return {
				
			};
	
	}
}
</script>

<style scoped lang="scss">
.index-slist{
	display: flex;
	border-radius: 10px;
	width: 720rpx;
	height: 250rpx;
	margin-top: 15px;
	background-color: #fff;
	
	img{
		border-radius: 10px;
		height: 100%;
		width: 25%;
	}
	
	.article{
		padding: 15rpx 15rpx 15rpx 35rpx;
		display: flex;
		flex-direction: column;
		
		.text{
			display: flex;
			flex-direction: column;
			
			.title{
				font-size: 15px;
				color: #000;
			}
			
			.a1{
				font-size: 12px;
				color: #999;
				padding: 30rpx 0;
				// 文字限制为2行  超出部分为省略号
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		
		.msg{
			img{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 25rpx;
			}
			
			.msg-name{
				font-size: 12px;
				color: #999;
				line-height: 60rpx;
			}
		}
	}
}
	
</style>